<template>
  <div>
    <a-card :bordered="false">
      <a-row>
        <a-col :md="24" :sm="24">
          <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
        </a-col>
      </a-row>
      <a-tabs :activeKey="queryParam.status" @change="tabsChange">
        <a-tab-pane :key="1" :tab="`上架`"></a-tab-pane>
        <a-tab-pane :key="0" :tab="`下架`" forceRender></a-tab-pane>
      </a-tabs>
      <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1600 }">
        <span slot="type" slot-scope="text">{{ type(text, typeList) }}</span>
        <span slot="vouchers" slot-scope="text">
          <ellipsis :length="30" tooltip>{{ vouchers(text, coupons) }}</ellipsis>
        </span>
        <span slot="status" slot-scope="text">{{ text | status }}</span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="getQrCode(record)">二维码</a>
            <a-divider type="vertical" />
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定上架吗?" ok-text="Yes" cancel-text="No" @confirm="handleEnable(record, 1)" v-if="record.status == 0">
              <a href="#">上架</a>
            </a-popconfirm>
            <a-popconfirm title="确定下架吗?" ok-text="Yes" cancel-text="No" @confirm="handleEnable(record, 0)" v-if="record.status == 1">
              <a href="#">下架</a>
            </a-popconfirm>
          </template>
        </span>
      </s-table>
    </a-card>
    <CodeModal ref="codeModal"></CodeModal>
    <EditDrawer ref="editDrawer" :typeList="typeList" :coupons="coupons" :uploadParams="uploadParams" v-if="showEdit" @editOk="editOk"></EditDrawer>
  </div>
</template>
<script>
import { STable, Ellipsis } from '@/views/box/components'
import CodeModal from './codeModal'
import { activityList, activityCreate, couponList } from '@/api/box/setting'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import { routeMixin } from '@/views/box/util/routeMixin'
import EditDrawer from './editDrawer'
import globalData from '@/assets/js/common'
import { values } from 'lodash'
const columns = [
  { title: '活动ID', dataIndex: 'id', align: 'center' },
  { title: '标题', width: 200, dataIndex: 'name', align: 'center' },
  { title: '活动类型', dataIndex: 'type', width: 150, align: 'center', scopedSlots: { customRender: 'type' } },
  { title: '关联优惠券', dataIndex: 'vouchers', width: 280, align: 'center', scopedSlots: { customRender: 'vouchers' } },
  { title: '剩余/总数', dataIndex: 'nums', align: 'center', customRender: (text, record) => `${text - record.openNums}/${text}` },
  { title: '状态', dataIndex: 'actStatus', align: 'center' },
  { title: '活动时间', dataIndex: 'startTime', align: 'center', width: 200, customRender: (text, record) => `${text} - ${record.endTime}` },
  { title: '操作', fixed: 'right', width: 180, align: 'center', scopedSlots: { customRender: 'action' } }
]
export default {
  mixins: [routeMixin],
  components: {
    STable,
    CodeModal,
    EditDrawer,
    Ellipsis
  },
  data() {
    return {
      columns,
      queryParam: {
        status: 1
      },
      paginationProps: {
        total: 0,
        pageSize: 15,
        showTotal: total => `共有 ${total} 条数据`
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => this.fetchData(parameter),
      typeList: [],
      coupons: [],
      showEdit: false,
      uploadParams: null
    }
  },
  filters: {
    status(v) {
      return v == 1 ? '下架' : '上架'
    }
  },
  computed: {
    type() {
      return (text, typeList) => {
        let list = typeList.filter(e => e.value == text)
        return list.length > 0 ? list[0].title : text
      }
    },
    vouchers() {
      return (text, coupons) => {
        let arr = text.split(',')
        if (arr.length > 0) {
          let vouchersList = coupons.filter(e => arr.includes(e.id))
          let name = vouchersList.length > 0 ? vouchersList.map(e => e.name).join(',') : ''
          return name
        }
        return ''
      }
    }
  },
  watch: {
    showEdit(value) {
      if (value) this.$refs.table.refresh(true)
    }
  },
  created() {
    this.initialPage()
  },
  methods: {
    async initialPage() {
      this.uploadParams = this.getUploadParams()
      await this.initDictConfig()
      await this.fetchCouponList()
      this.showEdit = true
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    initDictConfig() {
      //初始化字典
      return initDictOptions('coupon_record_type').then(res => {
        if (res.success) {
          this.typeList = res.result
        }
      })
    },
    fetchCouponList() {
      let params = {
        page: {
          pageSize: 100,
          pageNo: 1
        },
        requestData: {}
      }
      return couponList(params).then(res => {
        if (res.code == 0) {
          this.coupons = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    tabsChange(key) {
      this.queryParam.status = key
      this.$refs.table.refresh(true)
    },
    fetchData(parameter) {
      if (this.showEdit) {
        let params = {
          page: parameter,
          requestData: {
            status: this.queryParam.status
          }
        }
        return activityList(params).then(res => {
          if (res.code == 0) {
            /* for (let item of res.data) {
              let arr = item.vouchers
              item.vouchersName = this.coupons
                .filter(e => arr.includes(e.id))
                .map(i => i.name)
                .join(',')
            } */
            return res
          } else {
            this.$message.warning(res.msg)
            return {
              data: [],
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 10
              }
            }
          }
        })
      }
    },
    getQrCode(record) {
      let codeData = {
        codeUrl: record.code,
        qrcodeUrl: record.qrcode,
        id: record.id
      }
      this.$refs.codeModal.show(codeData)
    },
    handleEdit(record) {
      this.$refs.editDrawer.show(record.id)
    },
    handleEnable(record, e) {
      let params = {
        requestData: {
          id: record.id,
          status: e
        }
      }
      activityCreate(params).then(res => {
        if (res.code == 0) {
          this.$message.success('修改成功！')
          this.$refs.table.refresh()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleAdd() {
      this.$refs.editDrawer.show('add')
    },
    editOk() {
      this.$refs.table.refresh()
    }
  }
}
</script>

